<template>
	<view class="indexPage">
		<view class="topView">
			<!-- 设置按钮 -->
			<view class="shezhi">
				<text></text>
				<text class="wlIcon-shezhi" @tap="$wanlshop.auth('/pages/user/setting/setting')"></text>
			</view>
			<!-- 登陆注册 -->
			<view class="login flex ">
				<view class="flex left" v-if="user.isLogin">
					<view class="" style="font-size: 36rpx;">
						<text>{{user.nickname}}</text>
					</view>
					<text>ID：{{user.id}}</text>
				</view>
				<view class="flex left" v-else @tap="$wanlshop.auth('/pages/user')">
					<view class="" style="font-size: 36rpx;">
						<text>未登录</text>
						<text>/</text>
						<text>注册</text>
					</view>
					<text>点击登录 查看更多功能</text>
				</view>
				<view class="" v-if="user.isLogin">
					<image :src="user.avatar||'../static/images/touxiang.png'" style="width: 100rpx;height: 100rpx;border-radius: 50%;" mode="aspectFill"></image>
				</view>
				<view class="" v-else>
					<image src="../static/images/touxiang.png" style="width: 100rpx;height: 100rpx;" mode="aspectFill"></image>
				</view>
			</view>
			<view class="flex " style="justify-content: space-around;color: #FFFFFF;margin-top: 32rpx;">
				<view class="flex flex-column align-center" @tap="$wanlshop.auth('/pages/user/coupon/list')">
					<image class="img" src="../static/images/yhj.png" mode="widthFix"></image>
					<text>优惠卷</text>
				</view>
				<view class="flex flex-column align-center" @tap="$wanlshop.auth('/pages/user/collect')">
					<image class="img" src="../static/images/wdsc.png" mode="widthFix"></image>
					<text>我的收藏</text>
				</view>
				<view class="flex flex-column align-center" @tap="$wanlshop.auth('/pages/user/footprint')">
					<image class="img" src="../static/images/llls.png" mode="widthFix"></image>
					<text>浏览历史</text>
				</view>
				<view class="flex flex-column align-center" @tap="$wanlshop.auth('/pages/user/follow')">
					<image class="img" src="../static/images/wdgz.png" mode="widthFix"></image>
					<text>我的关注</text>
				</view>
			</view>
			<view class="myorder flex flex-column justify-between">
				<view class="flex justify-between">
					<text style="font-size: 28rpx;font-weight: bold;">我的订单</text>
					<view class="" style="color: #999999;">
						<text>查看更多</text>
						<text class="wlIcon-fanhui2"></text>
					</view>
				</view>
				<view class="flex " style="justify-content: space-around;color: #5A5A5A;" @tap="$wanlshop.auth('/pages/user/order/order?state=1')">
					<view class="flex flex-column align-center">
						<image class="img" src="../static/images/dfh.png" mode="widthFix"></image>
						<text>待付款</text>
					</view>
					<view class="flex flex-column align-center" @tap="$wanlshop.auth('/pages/user/order/order?state=3')">
						<image class="img" src="../static/images/dfh.png" mode="widthFix"></image>
						<text>待发货</text>
					</view>
					<view class="flex flex-column align-center">
						<image class="img" src="../static/images/dsh.png" mode="widthFix"></image>
						<text>待收货</text>
					</view>
					<view class="flex flex-column align-center" @tap="$wanlshop.auth('/pages/user/order/order?state=4')">
						<image class="img" src="../static/images/dpj.png" mode="widthFix"></image>
						<text>待评价</text>
					</view>
					<view class="flex flex-column align-center" @tap="$wanlshop.auth('/pages/user/refund/lists')">
						<image class="img" src="../static/images/sh.png" mode="widthFix"></image>
						<text>售后</text>
					</view>
				</view>
			</view>
		</view>
		<view class="center" v-if="user.isLogin">
			<view class="centerView flex align-center justify-between" style="background-color: #E02020;">
				<view style="height: 100%;" class="flex flex-column justify-between">
					<view class="flex align-center" style="color: #FFFFFF;">
						<image style="width: 40rpx;height: 40rpx;" src="../static/images/qb-icon.png" mode="widthFix"></image>
						<text style="font-size: 28rpx;font-weight: bold;margin-left: 16rpx;">我的余额</text>
					</view>
					<view class="qb" style="color: #FFFFFF;padding-left: 52rpx;">
						<text @tap="$wanlshop.auth('/pages/user/money/withdraw')">立即提现</text>
						<text>拿去花</text>
						<text @tap="$wanlshop.auth('/pages/user/money/recharge')">充值消费</text>
					</view>
				</view>
				<view class="look_btns" @tap="$wanlshop.auth('/pages/user/money/money')"> 立即查看 </view>
			</view>
		</view>
		<view class="center" v-else>
			<view class="centerView flex align-center justify-between">
				<view style="height: 100%;" class="flex flex-column justify-between">
					<view class="flex align-center">
						<image style="width: 40rpx;height: 40rpx;" src="../static/images/qb.png" mode="widthFix"></image>
						<text style="font-size: 28rpx;font-weight: bold;margin-left: 16rpx;">我的余额</text>
					</view>
					<view class="qb" style="color: #5A5A5A;padding-left: 52rpx;">
						<text @tap="$wanlshop.auth('/pages/user/money/withdraw')">立即提现</text>
						<text>拿去花</text>
						<text @tap="$wanlshop.auth('/pages/user/money/recharge')">充值消费</text>
					</view>
				</view>
				<view class="look_btn" @tap="$wanlshop.auth('/pages/user/money/money')"> 立即查看 </view>
			</view>
		</view>
		<!-- 其他功能 -->
		<view class="otherfeatures">
			<view class="other">
				<view class="" style="font-size: 28rpx;font-weight: bold;"> 其他功能 </view>
				<view class="flex" style="flex-wrap: wrap;width: 100%;">
					<view class="item" v-for="(item,index) in features" @tap="$wanlshop.auth(item.url)">
						<image :src="item.img" mode="widthFix"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				features: [ {
					title: "拼团订单",
					img: '../static/images/ptdd.png',
					url: '/pages/apps/groups/order/order'
				}, {
					title: "我的评价",
					img: '../static/images/wdpj.png',
					url: '/pages/user/comment/comment'
				}, {
					title: "收获地址",
					img: '../static/images/shdz.png',
					url: '/pages/user/address/address'
				}, {
					title: "我的举报",
					img: '../static/images/wdjb.png',
					url: '/pages/user/complaint/lists'
				}, {
					title: "客服",
					img: '../static/images/wdkf.png',
					url: '/pages/user/service'
				}, {
					title: "领优惠券",
					img: '../static/images/lyhj.png',
					url: '/pages/user/coupon/list'
				}, {
					title: "商家入驻",
					img: '../static/images/sjrz.png',
					url: '/pages/shop/apply/details'
				}, {
					title: "我的团队",
					img: '../static/images/wdkf.png',
					url: '/pages/user/team/index'
				}, {
					title: "邀请好友",
					img: '../static/images/yqhy.png',
					url: '/pages/user/qrcode/qrcode'
				}, {
					title: "消息",
					img: '../static/images/wdxx.png',
					// url:'/pages/apps/groups/order/order'
				}, ]
			}
		},
		computed: {
			...mapState( [ 'user', 'statistics', 'common' ] ),
			...mapGetters( 'common', [ 'integralName' ] ),
		},
		onShow() {
			this.loadData();
		},
		onLoad() {},        
		methods: {
			async loadData() {
				this.$api.post( {
					url: '/wanlshop/user/refresh',
					success: res => {
						console.log( res, '111' )
						this.$store.commit( 'statistics/edit', res.statistics );
						this.$store.commit( 'user/setUserInfo', res.userinfo );
					},
				} );
			},
		}
	}
</script>
<style lang="scss">
	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.flex-column {
		flex-direction: column;
	}

	.item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;

		image {
			width: 44rpx;
		}
	}

	.img {
		width: 44rpx;
		// height: 40rpx; 
	}

	.center {
		padding: 0 32rpx;
		height: 140rpx;
	}

	.otherfeatures {
		padding: 0 32rpx;
		margin-top: 40rpx;

		.other {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 2px 10px 0px rgba(230, 232, 235, 0.5);
			border-radius: 10px;
			padding: 24rpx;
		}
	}

	.qb text {
		margin-right: 24rpx;
	}

	.look_btns {
		width: 128rpx;
		height: 44rpx;
		border-radius: 22rpx;
		border: 2rpx solid #FFFFFF;
		text-align: center;
		line-height: 40rpx;
		color: #FFFFFF;
	}

	.look_btn {
		width: 128rpx;
		height: 44rpx;
		border-radius: 22rpx;
		border: 2rpx solid #E02020;
		text-align: center;
		line-height: 40rpx;
		color: #E02020;
	}

	.centerView {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px rgba(230, 232, 235, 0.5);
		border-radius: 20rpx;
		margin-top: 120rpx;
		padding: 24rpx;
	}

	.topView {
		padding: 0 32rpx;
		width: 100%;
		height: 496rpx;
		background-image: url(../static/images/bg_user.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: 88rpx;

		.myorder {
			height: 170rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 10px 0px rgba(230, 232, 235, 0.5);
			border-radius: 20rpx;
			margin-top: 16rpx;
			padding: 20rpx;
		}

		.login {
			align-items: center;
			justify-content: space-between;
			margin-top: 8rpx;
			height: 100rpx;

			.left {
				justify-content: space-between;
				flex-direction: column;
				color: #FFFFFF;
				height: 100%;
			}
		}

		.shezhi {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wlIcon-shezhi {
				color: #FFFFFF;
				font-size: 40rpx;
			}
		}
	}
</style>
